<template>
  <div class="rightRank">
    <ul class="right-list">
      <li v-for="(item, index) in rankList">
        <div class="right-item" v-show="!isShow">
          <span
            class="rank-img"
            :class="{
              rank_img1: index == 0,
              rank_img2: index == 1,
              rank_img3: index == 2,
            }"
          >
            {{ index + 1 }}
          </span>
          <div class="right-wrapper">
            <a :href="`https://m.ximalaya.com${item.albumUrl}`">
              <img :src="'https://imagev2.xmcdn.com/' + item.cover" alt="" />
              <div class="wrapper-size">
                <van-text-ellipsis
                  class="text"
                  :content="item.albumTitle"
                  rows="2"
                ></van-text-ellipsis>
                <p>{{ item.salePoint }}</p>
                <div class="wrapper-bottom">
                  <span>
                    <i class="icon1"></i>
                    {{ (item.playCount / 100000000).toFixed(2) }}亿
                  </span>
                  <span class="icon2">
                    <i></i>
                    {{ item.trackCount }}
                  </span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </li>
    </ul>
    <!--  -->
    <div v-show="isShow">
      <van-skeleton v-for="item in 5">
        <template #template>
          <div
            :style="{
              display: 'flex',
              width: '100%',
              borderBottom: '1px solid #999',
              padding: '15px 10px 15px 0',
            }"
          >
            <van-skeleton-image :style="{ width: '70px', height: '70px' }" />
            <div :style="{ marginLeft: '8px' }">
              <van-skeleton-paragraph
                class="text"
                :style="{ width: '169px' }"
              />
              <van-skeleton-paragraph row-width="60%" class="wrapper-bottom" />
              <van-skeleton-paragraph row-width="60%" class="wrapper-bottom" />
            </div>
          </div>
        </template>
      </van-skeleton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqRankingId } from "@/apis/rank";
import { onMounted, ref, watch } from "vue";
import type { TabListsModel } from "@/apis/rank";

const props = defineProps<{
  sideItem: number;
}>();

// 获取数据
const rankList = ref<TabListsModel[]>([]);
const getRankingId = async (rankingId: number) => {
  try {
    let result = await reqRankingId(rankingId);
    rankList.value = result.data.rankList[0]?.albums;
  } catch (error) {
    console.log(error);
  }
};
// 显示隐藏
const isShow = ref(true);
watch(rankList, (nval) => {
  if (rankList.value.length) {
    isShow.value = false;
  } else {
    isShow.value = true;
  }
});

watch(props, (nval) => {
  rankList.value = [];
  getRankingId(nval.sideItem);
});

onMounted(() => {
  getRankingId(props.sideItem);
});
</script>

<style scoped lang="less">
.rightRank {
  z-index: 200;
  overflow-x: hidden;
  overflow-y: scroll;
  .right-list {
    margin-top: 5px;
    .right-item {
      display: flex;
      .rank-img {
        display: inline-block;
        height: 19px;
        width: 40px;
        z-index: 50;
        line-height: 20px;
        margin: 18px 8px 0 5px;
        text-align: center;
        font-size: 20px;
      }
      .rank_img1 {
        display: inline-block;
        color: #fff;
        background-color: rgb(244, 134, 73);
        font-size: 14px;
      }
      .rank_img2 {
        display: inline-block;
        color: #fff;
        background-color: rgb(239, 119, 42);
        font-size: 14px;
      }
      .rank_img3 {
        display: inline-block;
        color: #fff;
        background-color: rgb(251, 184, 45);
        font-size: 14px;
      }
      .right-wrapper {
        display: flex;
        border-bottom: 1px solid #333;
        padding: 15px 10px 15px 0;
        a {
          display: flex;
          img {
            width: 70px;
            height: 70px;
            padding-right: 15px;
          }
          .wrapper-size {
            line-height: 20px;

            .text {
              color: #40404c;
              font-weight: 500;
              font-size: 16px;
              width: 169px;
            }
            p {
              font-size: 13px;
              color: #999;
              margin-top: 5px;
            }
            .wrapper-bottom {
              span {
                margin-right: 10px;
                font-size: 12px;
                color: #999;
              }
              .icon1 {
                &::before {
                  content: "\e654";
                  font-family: "iconfont";
                  margin-right: 3px;
                  font-size: 14px;
                }
              }
              .icon2 {
                &::before {
                  content: "\e682";
                  font-family: "iconfont";
                  margin-right: 3px;
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.flex {
  display: flex;
}
</style>
